import { UAParser } from "ua-parser-js";

export default defineNuxtRouteMiddleware((to, from) => {
  // 只在客户端执行
  if (import.meta.client && false) {
    // 修复类型问题
    const parser = new (UAParser as any)();
    const result = parser.getResult();
    console.log(result);
    // 定义支持的最低版本
    const minVersions = {
      Chrome: 140,
      Firefox: 78,
      Safari: 14,
      "Microsoft Edge": 88,
      IE: Infinity, // 不支持IE
    };

    const browser = result.browser;
    const browserName = browser.name || "";
    const browserVersion = parseInt(browser.version || "0");

    // 检查浏览器版本
    if (browserName && browserName in minVersions) {
      const minVersion = minVersions[browserName as keyof typeof minVersions];

      if (browserVersion < minVersion) {
        // 创建提示信息
        const message = `您当前使用的是 ${browserName} ${browserVersion} 版本，
          为了更好的使用体验，建议升级到 ${browserName} ${minVersion} 或更高版本。`;

        // 显示提示
        showBrowserAlert(message);
      }
    }
  }
});

// 显示提示的函数
function showBrowserAlert(message: string) {
  // 检查是否已经显示过提示
  // const hasShown = localStorage.getItem("browser-alert-shown");
  // if (hasShown) return;

  // 创建提示元素
  const alertDiv = document.createElement("div");
  alertDiv.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff3cd;
    color: #856404;
    padding: 12px;
    text-align: center;
    z-index: 9999;
    border: 1px solid #ffeeba;
  `;

  // 创建关闭按钮
  const closeButton = document.createElement("button");
  closeButton.innerHTML = "×";
  closeButton.style.cssText = `
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: #856404;
  `;

  // 添加消息
  alertDiv.textContent = message;
  alertDiv.appendChild(closeButton);

  // 添加关闭事件
  closeButton.onclick = () => {
    alertDiv.remove();
    // localStorage.setItem("browser-alert-shown", "true");
  };

  // 添加到页面
  document.body.appendChild(alertDiv);
}
